<!DOCTYPE HTML>
<svg width="100" height="100" style="display: none;">
    <defs>
        <rect id="greenSquare" width="100" height="100" fill="red" />
        <use id="useGreenSquare" xlink:href="#greenSquare"/>
    </defs>
</svg>
<template id="template">
    <svg width="100" height="100">
        <defs>
            <rect id="greenSquare" width="100" height="100" fill="green" />
            <use id="useGreenSquare" xlink:href="#greenSquare"/>
        </defs>
        <use xlink:href="#useGreenSquare"/>
    </svg>
</template>
<script>
    document.body.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true));
</script>